<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>

    <!-- font-icon -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/font-welkin/css/iconfont.css">
    <!-- bootstrap-core -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap/v3.3.7/css/bootstrap.min.css">

    <!-- plugins -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.min.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-validator/css/bootstrapValidator.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">

    <link rel="stylesheet" href="${ctxFrontStatic }/style/welkin.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/style/header.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/style/app.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${ctxFrontStatic }/libs/html5shiv.min.js"></script>
    <script src="${ctxFrontStatic }/libs/respond.min.js"></script>
    <![endif]-->


</head>
<body>
<section class="main" style="padding-top: 20px">
    <div class="container-fluid ">

        <div class="wlk-top">
            <div class="row">
                <div class="col-sm-2">
                    <img src="${ctxFrontStatic }/images/recharge.png" alt=""/>
                </div>
                <div class="col-sm-3" style="margin-left: -29px;">
                    <p class="p-title">立即充值</p>
                    <p class="p-en">Recharge</p>
                </div>
                <div class="col-sm-19">
                    <p>1.我们提供在线充值服务(支付宝、银联、微信)及银行对公汇款</p>
                    <p>2.请尽量保障账户余额大于您在资源配置内设置的保底套餐额度,避免余额不足造成业务中断</p>
                </div>
            </div>
        </div>
        <div class="wlk-bottom">
            <div class="recharge-cont">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">在线充值</a>
                    </li>
                    <li role="presentation">
                        <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">银行对公汇款</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="list-top">
                            <p class="list">1.选择套餐</p>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="list-box">
                                        <div class="list-p text-center">
                                            <span class="list-num">4.5</span>
                                            <span>分/条</span>
                                        </div>
                                        <div class=" list-pic text-center">
                                            <p>充值3万元</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="list-box">
                                        <div class="list-p text-center">
                                            <span class="list-num">4.5</span>
                                            <span>分/条</span>
                                        </div>
                                        <div class=" list-pic text-center">
                                            <p>充值3万元</p>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-sm-6">
                                    <div class="list-box">
                                        <div class="list-p text-center">
                                            <span class="list-num">4.5</span>
                                            <span>分/条</span>
                                        </div>
                                        <div class=" list-pic text-center">
                                            <p>充值3万元</p>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-sm-6">
                                    <div class="list-box">
                                        <div class="list-p text-center">
                                            <span class="list-num">4.5</span>
                                            <span>分/条</span>
                                        </div>
                                        <div class=" list-pic text-center">
                                            <p>充值3万元</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="list-bottom">
                            <p class="list">2.选择套餐</p>
                            <p>应付金额: <span class="num">30000</span>元</p>
                            <div class="row">
                                <div class="col-sm-6 ">
                                    <img src="${ctxFrontStatic }/images/code.png" class="code" alt=""/>
                                </div>
                                <div class="col-sm-6 ">
                                    <img src="${ctxFrontStatic }/images/code.png" class="code" alt=""/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <img src="${ctxFrontStatic }/images/wechat.png" alt="">
                                    <span class="text">使用微信扫码支付</span>
                                </div>
                                <div class="col-sm-6">
                                    <img src="${ctxFrontStatic }/images/alipay.png" alt="">
                                    <span class="text">使用支付宝扫码支付</span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <p class="list line">收款账户</p>
                        <div class="row information">
                            <div class="col-sm-8">
                                <ul>
                                    <li>
                                        <p>开户名称:<span> xxxxxxxx有限公司</span></p>
                                    </li>
                                    <li>
                                        <p>收款账号:<span> xxxxxxxxxxxxxxxxxxxxxx</span></p>
                                    </li>
                                    <li>
                                        <p>开户银行:<span> xxxxxxxx支行</span></p>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-sm-16 warn">
                                <div class="col-sm-2">
                                    <img src="${ctxFrontStatic }/images/caution.png" alt=""/>
                                </div>
                                <div class="col-sm-22">
                                    <span class="warn-txt">汇款时请在备注中写明您在xxxxxxxx的认证名,以便入账;到账时间取决于汇款行与开户行间的结算,正常为1个工作日,若有疑问请联系客户经理或客服。</span>
                                </div>
                            </div>
                        </div>
                        <div class="row ">
                            <div class="col-sm-6 ">
                                <img src="${ctxFrontStatic }/images/code.png" class="code" alt=""/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <span class="text">关注服务号汇款到账早知道</span>
                            </div>
                        </div>


                    </div>

                </div>
            </div>

        </div>
    </div>


</section>


<!--js-->
<script src="${ctxFrontStatic }/libs/jquery/v1.12.4/jquery.min.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap/v3.3.7/js/bootstrap.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctxFrontStatic }/libs/echarts/echarts.min.js"></script>
<script src="${ctxFrontStatic }/js/navbar.js"></script>


</body>
</html>